<template>
  <q-page class="bg-grey-1">
    <div id="__DIR______EN_NAME____List" class="">
      <q-table class="common_list" flat
               :columns="table.columns" :data="data" :visible-columns="table.visibleColumns"
               :pagination="{rowsNumber:page.rowsNumber}"
               :fullscreen="table.fullscreen" :loading="loading"
               :selected-rows-label="showSelectCount" :selected.sync="selected"
               :style="{maxHeight:table.fullscreen?'100%':'calc(100vh - 95px)'}"
               row-key="id" selection="multiple">
        <template v-slot:body-cell="props">
          <q-td :props="props">
            <template v-if="props.col.name === 'id'">{{ props.row.id }}</template>
<!--            自定义Table 单元格区域        start-->

<!--            自定义Table 单元格区域        end-->
            <template v-else-if="props.col.name === '_actions'">
              <q-btn v-auth="permission.edit" color="primary" @click="openEdit(props.row.id)" flat>编辑</q-btn>
              <q-btn v-auth="permission.del" color="negative" @click="deleteOne(props.row.id)" flat>删除</q-btn>
            </template>
            <template v-else>
              <EzListViewer :config="props.col" :row="props.row"></EzListViewer>
            </template>
          </q-td>
        </template>
        <template v-slot:top>
          <div class="bg-grey-2 full-width row items-center q-px-sm rounded-borders">
            <div class="text-h6 q-pa-sm text-weight-bold q-mr-lg">{{ conf_title }}</div>
            <q-separator vertical></q-separator>
            <div class="col q-pl-lg">
              <q-btn v-auth="permission.add" @click="openEdit" class="q-mr-sm" size="sm" color="primary" icon="add">
                <q-tooltip v-bind="conf_btn_placement">新增</q-tooltip>
              </q-btn>
              <q-btn v-auth="permission.copy" @click="copy" class="q-mr-sm" size="sm" color="accent" icon="content_copy">
                <q-tooltip v-bind="conf_btn_placement">复制</q-tooltip>
              </q-btn>
              <q-btn @click="getList" class="q-mr-sm" size="sm" color="positive" icon="refresh">
                <q-tooltip v-bind="conf_btn_placement">刷新</q-tooltip>
              </q-btn>
              <q-btn v-auth="permission.del" @click="deleteMany" class="q-mr-sm text-body2" size="sm" color="negative" icon="delete" outline>
                <q-tooltip v-bind="conf_btn_placement_err">删除！请慎重</q-tooltip>
              </q-btn>
<!--              <q-btn class="q-ml-sm" size="sm" color="primary" icon="more_vert" flat>-->
<!--                <q-menu anchor="top right" self="top left">-->
<!--                  <q-list dense>-->
<!--                    <q-item clickable>-->
<!--                      <q-item-section>更多操作</q-item-section>-->
<!--                    </q-item>-->
<!--                  </q-list>-->
<!--                </q-menu>-->
<!--              </q-btn>-->
            </div>
            <div>
              <q-input v-model="searchText" dense rounded clearable @keydown.enter="getList(1)"
                       placeholder="输入关键字或ID搜索" class="q-mr-sm">
                <template v-slot:append>
                  <q-btn icon="search" round flat @click="getList(1)"></q-btn>
                </template>
              </q-input>
            </div>
            <div class="row items-center q-pl-md">
              <div class="text-body1">
                <q-icon name="low_priority" size="1.5em"></q-icon>
                <q-tooltip v-bind="conf_btn_placement">调整排序</q-tooltip>
              </div>
              <IcsSort :config="conf_sort" @change="reSort"></IcsSort>
            </div>
<!--            <q-separator vertical></q-separator>-->
<!--            <IcsExcelIO class="q-px-sm" :url-import="conf_import_url" :url-export="conf_export_url" :search-form="searchForm" ></IcsExcelIO>-->
            <q-separator vertical></q-separator>
            <div class="text-right q-ml-sm">
              <q-btn size="" :icon="table.fullscreen?'fullscreen_exit':'fullscreen'"
                     @click="table.fullscreen = !table.fullscreen" flat round>
                <q-tooltip v-bind="conf_btn_placement">表格全屏</q-tooltip>
              </q-btn>
            </div>
            <div class="text-right q-ml-sm" v-if="useSearch">
              <q-btn @click="showSearch = !showSearch" class="q-mr-sm" size="sm" color="positive" icon="search" outline>
                <q-tooltip v-bind="conf_btn_placement">高级搜索</q-tooltip>
              </q-btn>
            </div>
          </div>
        </template>
        <template v-slot:bottom>
          <div class="row flex-center full-width content-stretch bg-grey-2 rounded-borders q-pa-sm q-my-sm">
            <div class="col text-body2">
              本页：{{data.length}}条，总计：{{ page.total }}条
              <span v-if="selected.length > 0">【 选中{{selected.length}}条 】</span>
            </div>
            <div class="">
              <q-pagination @input="getList" :max-pages="5" :max="page.max" v-model="page.page" direction-links boundary-links boundary-numbers/>
            </div>
            <div class="q-px-md">
              <q-select @input="getList(1)" :options="page.sizeChoice" v-model="page.size" dense hide-dropdown-icon options-dense prefix="每页/" standout="bg-primary" style="width: 110px;" >
                <template v-slot:append>
                  <q-btn :icon="!page.showPageSizeInput?'edit':'edit_off'" flat round size="xs" @click="page.showPageSizeInput = !page.showPageSizeInput"></q-btn>
                </template>
              </q-select>
            </div>
            <q-input v-model.number="page.size" v-show="page.showPageSizeInput" dense standout="bg-primary" style="width: 60px"></q-input>
            <div class="text-right q-ml-sm" v-if="table.columns.length > 5">
              <q-btn flat icon="settings" size="sm" round>
                  <q-menu anchor="bottom right" self="top right">
                    <q-toolbar class="bg-primary text-white">
                      <div>表头缓存管理</div>
                      <q-space></q-space>
                      <q-btn stretch flat @click="clearCache">清空缓存</q-btn>
                    </q-toolbar>
                    <q-scroll-area style="width: 500px;height: 500px;">
                      <q-list style="width: 500px">
                        <VueDraggable @change="rebuildVisibleColumns" :options="{animation: 150, group: 'description'}" v-model="table.columns">
                          <q-item :key="index" class="row flex-center" v-for="(item,index) in table.columns">
                            <div class="">
                              <q-btn flat icon="expand" round size="sm"></q-btn>
                            </div>
                            <div class="col">{{ item.label }}</div>
                            <div class="col">
                              <q-btn @click="item.align = 'left'" flat icon="format_align_left" round size="sm"></q-btn>
                              <q-btn @click="item.align = 'center'" flat icon="format_align_center" round size="sm"></q-btn>
                              <q-btn @click="item.align = 'right'" flat icon="format_align_right" round size="sm"></q-btn>
                            </div>
                            <div class="">
                              <q-toggle @input="rebuildVisibleColumns" v-model="item.show"></q-toggle>
                            </div>
                          </q-item>
                        </VueDraggable>
                      </q-list>
                    </q-scroll-area>
                  </q-menu>
                </q-btn>
            </div>
          </div>

        </template>
      </q-table>
    </div>

    <!--    条件搜索对话-->
    <q-dialog maximized v-model="showSearch" position="right" full-height  v-if="useSearch">
      <q-card class="q-pa-md" style="width: 600px">
        <q-scroll-area style="height: calc(100vh - 100px);">
          <div class="text-body1"><q-icon size="md" name="search" class="q-mr-md"></q-icon>条件搜索</div>
          <q-separator class="q-my-md"></q-separator>
          <div>
            <IcsForm :model.sync="searchModel" :form="searchForm" :key="searchFormUpdateKey"></IcsForm>
          </div>
          <q-separator class="q-my-md"></q-separator>
          <div class="row flex-center">
            <q-btn label="搜索" @click="search" color="primary" />
            <q-btn label="重置" @click="resetSearchBox" class="q-ml-lg"/>
          </div>
        </q-scroll-area>
      </q-card>
    </q-dialog>

    <!--    当前页编辑-->
    <q-dialog maximized persistent v-if="conf_edit_mini" v-model="showEdit" @shake="saveBeforeHide" @hide="onEditClose" position="right" full-height>
      <q-card style="width: 50vw">
        <EditMini ref="miniEditor" @done="showEdit = false" :model-id="curEditId" :key="editUpdateKey"></EditMini>
      </q-card>
    </q-dialog>

  </q-page>
</template>
<script>
  import VueDraggable from 'vuedraggable'
  import mixin_list_data from "./js/mixin_list_data";
  import mixin_list_table from "./js/mixin_list_table";
  import mixin_list_config from "./js/mixin_list_config";
  import mixin_list_edit from "./js/mixin_list_edit";
  import EditMini from "./EditMini.vue";
  import EzListViewer from "components/list/EzListViewer.vue";
  import IcsForm from "components/IcsForm.vue";
  import IcsSort from "components/list/IcsSort.vue";
  export default {
    mixins: [mixin_list_table, mixin_list_data, mixin_list_config, mixin_list_edit],
    components: {IcsSort, IcsForm, EzListViewer, EditMini, VueDraggable},
    data() {
      return {}
    }
  }
</script>
<style lang="sass">
.common_list
  thead tr th
    position: sticky
    z-index: 3
    background-color: white
    top: 0
  thead tr th:first-child
    position: sticky
    z-index: 4
    background-color: white
    left: 0
    top: 0
  thead tr th:nth-child(2)
    position: sticky
    z-index: 4
    background-color: white
    left: 72px
    top: 0
  thead tr th:last-child
    position: sticky
    z-index: 4
    background-color: white
    right: 0
    top: 0

  tbody tr td:last-child
    position: sticky
    z-index: 1
    background-color: white
    right: 0
  tbody tr td:first-child
    position: sticky
    z-index: 2
    background-color: white
    left: 0
  tbody tr td:nth-child(2)
    position: sticky
    z-index: 2
    background-color: white
    left: 72px
</style>
